<template>
    <div class="heyue_list_wp">
        <div class="heyue_title">
            <span>选择合约</span>
            <i class="iconfonMy icon-guanbi1" @click="confirmTap(2)"></i>
        </div>
        <div class="heyue_body">
            <ul class="heyue_body_left">
                <li class="yiji" v-for="(item, index) in leftList" :key="index">
                    <div class="yj_name" @click="leftList[index].isZhanKai = !leftList[index].isZhanKai">
                        <i class="iconfonMy icon-jiahao" v-show="!item.isZhanKai"></i>
                        <i class="iconfonMy icon-zuixiaohua" v-show="item.isZhanKai"></i>
                        <span>{{ item.name }}</span>
                    </div>
                    <div class="erji" v-show="item.isZhanKai">
                        <div class="ej_name" :class="{ active: it == selectIt }" v-for="it in item.childer" :key="it"
                            @click="selectListTap(it)">{{ it }}</div>
                    </div>
                </li>
            </ul>
            <el-table class="heyue_body_right" :data="heyueInfo" height="180px" size="small"
                :row-class-name="tableRowClassName" @row-click="handleRowClick" border>
                <el-table-column prop="heyue_bh" label="交易代码" width="100" />
                <el-table-column prop="heyue_name" label="合约名称" width="100" />
                <el-table-column prop="reserv_num" label="默认下单手数" width="100" />
                <el-table-column prop="zhu_bz" label="主力合约" width="100" />
            </el-table>
        </div>
        <div class="heyue_xinxi">
            <div v-show="selecList.heyue_name"><span>{{ selecList.heyue_name }}</span><span>{{ selecList.heyue_cs
            }}</span><span>{{
    selecList.shichang_name }}</span></div>
            <div v-show="selecList.heyue_name"><span>报价单位：{{ selecList.heyue_danwei }}</span><span>最后交易日：----</span></div>
        </div>
        <div class="btn">
            <button @click="confirmTap(1)">确认</button>
            <button @click="confirmTap(2)">取消</button>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { mainStore } from '@/store/index.js';
const { ipcRenderer } = require('electron');
import { ElMessage } from 'element-plus';
import { debounce } from 'lodash'


const storeMain = mainStore()

const list_info = computed(() => {
    if (!storeMain.heyueinfo) return {}
    let obj = {}
    storeMain.heyueinfo.forEach(item => {
        if (obj[item.shichang_name]) {
            obj[item.shichang_name].push(item)
        } else {
            obj[item.shichang_name] = [item]
        }
    })
    return obj
})

const heyueInfo = ref([])
const leftList = ref([])
const selectIt = ref('')
const selecList = ref({})
watch(() => storeMain.heyueinfo, () => {
    if (!storeMain.heyueinfo) return []
    let arr = [{
        isZhanKai: false,
        name: '博富交易所',
        childer: []
    }]
    storeMain.heyueinfo.forEach((item, index) => {
        item.zhu_bz = item.zhu_bz == 1 ? '主力' : ''
        if (index == 0) {
            arr[0].childer.push(item.shichang_name)
        } else {
            if (item.shichang_name != storeMain.heyueinfo[index - 1].shichang_name) {
                arr[0].childer.push(item.shichang_name)
            }
        }
    })
    leftList.value = arr
})

const selectListTap = (v) => {
    heyueInfo.value = list_info.value[v]
    selectIt.value = v
    selecList.value = heyueInfo.value[0]
}
const tableRowClassName = ({ row }) => {
    if (selecList.value.heyue_bh == row.heyue_bh) {
        return 'highlight-row';
    }
    return '';
}
const handleRowClick = (row) => {
    selecList.value = row
}
const confirmTap = debounce((type) => {
    if (type == 1 && !selecList.value.heyue_bh) return ElMessage({ message: "未选择合约", type: 'warning' });
    ipcRenderer.send('close-heyue-list', { type, val: { ...selecList.value } })
}, 50)

</script>

<style scoped lang="less">
.heyue_list_wp {
    color: #303133;
    background-color: #f3f3f3;
    width: 470px;
    height: 340px;
}

.heyue_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-app-region: drag;
    line-height: 25px;
    padding-left: 6px;

    .iconfonMy {
        -webkit-app-region: no-drag;
        width: 25px;
        text-align: center;
    }
}

.heyue_body {
    padding: 0 6px;
    display: flex;

    .heyue_body_left {
        border: 1px solid #8e929a;
        border-radius: 2px;
        width: 115px;
        height: 180px;
        padding: 0 4px;
        overflow-y: scroll;

        .yiji,
        .erji {
            position: relative;
            list-style: none;

            .yj_name {
                display: flex;
                align-items: center;

                .iconfonMy {
                    font-size: 8px;
                    border: 1px solid #a8a8a8;
                    background-color: #fafbfb;
                    color: #4c63a1;
                    width: 10px;
                    height: 10px;
                }

                span {
                    padding-left: 8px;
                    position: relative;
                }

                span::after {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 8px;
                    border-bottom: 1px dashed #8e929a;
                    width: 5px;
                }
            }

        }

        .yiji::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 17px;
            border-left: 1px dashed #8e929a;
            height: calc(100% - 17px);
        }

        .yiji:nth-last-of-type(1)::after {
            border: none;
        }

        .erji {
            margin-left: 24px;

            .ej_name {
                padding-left: 10px;
                position: relative;
            }

            .ej_name::after {
                content: '';
                position: absolute;
                left: 0;
                top: 8px;
                border-bottom: 1px dashed #8e929a;
                width: 7px;
            }

            .active {
                background: #0078d7;
                color: #fff;
            }
        }

        .erji::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            border-left: 1px dashed #8e929a;
            height: calc(100% - 7px);
        }
    }

    .heyue_body_right {
        background-color: #f1f8ff;
        border: 1px solid #8e929a;
        border-radius: 2px;
        flex: 1;
        margin-left: 6px;

        :deep(.el-table__cell) {
            border-color: #f0f2f4;
            color: #303133;
            padding: 0;
            background-color: #f1f8ff;

            .cell {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                padding: 0 2px;
            }
        }

        :deep(.is-leaf) {
            border-color: #b4b4b4;
            background-color: #f0f0f0;
        }
    }
}

.heyue_xinxi {
    margin: 6px;
    box-shadow: 1px 1px 1px 1px #999;
    height: 90px;

    div {
        padding-bottom: 10px;

        span {
            margin-right: 20px;
        }
    }
}

.btn {
    text-align: right;
    padding: 2px 6px;

    button {
        border-radius: 3px;
        font-size: 12px;
        border: 1px solid #d8d8d8;
        margin-left: 7px;
        background-color: #fdfdfd;
        width: 70px;
        line-height: 20px;
    }

    button:active {
        border-color: #268bd8;
    }
}

:deep(.highlight-row .el-table__cell) {
    background-color: #9ecee7 !important;
}
</style>
